<template>
  <section class="describe-box">
    <el-row>
      <el-col :span="6">
        <TextInputValue v-if="isEditDescribeStatus"
                        v-model="name"
                        :label="`合约名称`"
                        @input="input" />
        <div v-else
             class="describe-item"
             :title="objectValues.name">
          合约名称：{{objectValues.name}}
        </div>
      </el-col>
      <el-col :span="6"
              :class="{'customer-box': isEditDescribeStatus}">
        <div v-if="objectValues && objectValues.customerId"
             :title="customerName({customerId: objectValues.customerId})"
             class="describe-item">
          发货方名称：
          <Tooltip :content="shipperIconAndContent.content"
                   :placement="`top`">
            <div><icon-svg class-name="iconClass"
                        :icon-name="shipperIconAndContent.icon" /></div>
          </Tooltip>
          {{customerName({customerId: objectValues.customerId})}}
        </div>
        <div v-if="objectValues && objectValues.carrierId"
             :title="carrierName({carrierId: objectValues.carrierId})"
             class="describe-item">
          承运方名称：
          <Tooltip :content="carrierIconAndContent.content"
                   :placement="`top`">
            <div><icon-svg class-name="iconClass"
                        :icon-name="carrierIconAndContent.icon" /></div>
          </Tooltip>
          <div>{{carrierName({carrierId: objectValues.carrierId})}}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <TextInputValue v-if="isEditDescribeStatus"
                        v-model="code"
                        :label="`合约编号`"
                        @input="input" />
        <div v-else
             class="describe-item"
             :title="objectValues.code">
          合约编号：{{objectValues.code}}
        </div>
      </el-col>
      <el-col :span="6">
        <DatePickerValue v-if="isEditDescribeStatus"
                         v-model="date"
                         :label="`有效期`"
                         @input="input" />
        <div v-else
             class="describe-item describe-time"
             :title="sTime +'~'+ eTime">
          有效期：{{sTime}} ~ {{ eTime }}
        </div>
      </el-col>
    </el-row>
    <el-row v-if="isBargaReason">
      <el-col :span="12">
        <div class="reason-box">
          <div>{{ isBargaReason}}</div>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import TextInputValue from './TextInputValue.vue'
import DatePickerValue from './DatePickerValue.vue'
import Tooltip from '@components/basic/Tooltip.vue'
import { mapState } from "vuex";

export default {
  name: 'Describes',
  components: { TextInputValue, DatePickerValue, Tooltip },
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    describe: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      name: '',
      code: '',
      date: []
    }
  },
  computed: {
    ...mapState({
      detailData: (state) => state.quotation.detailData
    }),
    query () {
      return this.$route.query
    },
    status () {
      return Number(this.query?.status)
    },
    objectValues () {
      if (this.value?.templateId || Number(this.query.status) === 2 || Number(this.query.status) === 8) {
        return this.detailData
      } else {
        return this.value || this.describe
      }
      // return this.value?.templateId ? this.detailData : this.value
    },
    // datePicker () {
    //   return [this.sTime, this.eTime]
    // },
    sTime () {
      return this.objectValues?.startTime?.substring(0, 10) || this.contractValidDate[0]
    },
    eTime () {
      return this.objectValues?.endTime?.substring(0, 10) || this.contractValidDate[1]
    },
    contractValidDate () {
      return this.objectValues?.contractValidDate || []
    },
    customerName () {
      return ({ customerId }) => {
        return this.objectValues?.customerName || this.objectValues?.customerSelect.find(desc =>
          desc.customerId === customerId).name
      }
    },
    carrierName () {
      return ({ carrierId }) => {
        return this.objectValues?.carrierName || this.objectValues?.customerSelect.find(desc =>
          desc.carrierId === carrierId).name
      }
    },
    isEditDescribeStatus () {
      return this.objectValues?.status === 0 || this.objectValues?.status === 3 || !Number(this.detailData?.status)
    },
    bargaReason () {
      return `议价理由：${this.objectValues?.reason}`
    },
    refuseReason () {
      return `拒绝理由：${this.objectValues?.reason}`
    },
    closeReason () {
      return `关闭原因：${this.objectValues?.reason}`
    },
    isBargaReason () {
      if (!this?.objectValues?.reason) return
      const reasonsMap = {
        8: this.bargaReason,
        4: this.closeReason,
      };
      if (this.status in reasonsMap) {
        return reasonsMap[this.status];
      } else {
        return this.refuseReason;
      }
    },
    getIconAndContent () {
      return value => value ? { icon: 'xianshang', content: '线上' } : { icon: 'xianxia', content: '线下' };
    },
    carrierIconAndContent () {
      return this.getIconAndContent(this.objectValues?.carrierType)
    },
    shipperIconAndContent () {
      return this.getIconAndContent(this.objectValues?.customerType)
    }
  },
  created () {
    this.name = this.objectValues?.name || null
    this.code = this.objectValues?.code || null
    this.date = [this.sTime, this.eTime]
  },
  methods: {
    input () {
      let startTime = this.date[0] + " 00:00:00";
      let endTime = this.date[1] + " 23:59:59";
      this.$store.commit('quotation/DETAIL_DATA', {
        ...this.objectValues,
        name: this.name,
        code: this.code,
        startTime: startTime,
        endTime: endTime
      })
    }
  }
}
</script>

<style scoped>
.edit-color {
  color: var(--prev-color-primary);
}
.mouseLeave >>> .el-input--small .el-input__inner {
  /* height: 20px;
  line-height: 20px; */
}
.describe-box {
  width: 100%;
  line-height: 20px;
  /* display: flex;
  justify-content: space-between; */
}
.describe-item {
  width: 220px;
  /* padding-right: 30px; */
  display: inline-block;
  white-space: nowrap;
  display: flex;
  /* width: 180px; */
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.customer-box {
  height: 32px;
  line-height: 32px;
}
.reason-box {
  height: 32px;
  line-height: 32px;
}
.iconClass {
  padding-right: 5px;
}
</style>